<template>
    <div class="operatemanual">
        <div class="top">
            <el-input type="text" size="small" placeholder="请输入查找部件名称" v-model="searchTxt"
                      style="display: inline-block;width: 200px;margin-right: 20px;"/>
            <el-button @click="search()" size="small">搜索</el-button>
        </div>
        <div class="left">
            <ul>
                <li v-for="(item,key) in menuList" @click="toRight(key,item)" :key="item.id">
                    <a>
                        <span class="liId">{{item.id}}</span>
                        <span class="liright">
                            <pre class="liName">{{item.systemName.replace(/\s+/,"\n")}}</pre>
                        </span>
                        <span style="clear: both"></span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="center">
            <img :src="imageUrl" width="100%"/>
        </div>
        <div class="right">
            <ul>
                <li v-for="(item,key) in liList" :key="key" @click="toMaintain(item)">
                    <span class="name">{{item.denomination}}</span>
                    <span class="where"><i>位置</i>：<span>{{item.pos}}</span></span>
                    <span class="last"><span class="num">数量：{{item.amount}}</span> <span>库存：</span> <span class="id">产品编码：{{item.id}}</span></span>
                </li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
</template>

<script>
    import {getPartMenu, getPartMenuListMenu, getPartsMenu} from '../url'
    import {ERROR_OK} from "../constVar"

    export default {
        data() {
            return {
                hostId: 1,
                listId: 1,
                menuList: [],
                imageUrl:'',
                liList: [],
                searchTxt: '',
                searchInfo: [],
            }
        },
        methods: {
            async _getPartMenu(hostId) {
                let {status, data} = await getPartMenu(hostId);
                if (status === ERROR_OK) {
                    this.menuList = data;
                    // this.imageUrl = data[0].imageUrl;
                } else {
                    this.menuList = [];
                }
            },
            async _getPartMenuListMenu(menuId) {
                let {status, data} = await getPartMenuListMenu(menuId);
                if (status === ERROR_OK) {
                    this.liList = data.sparePartsManualList;
                } else {
                    this.liList = [];
                }
            },
            async _getPartsMenu(partNumber) {
                let {status, data} = await getPartsMenu(partNumber);
                if (status === ERROR_OK) {
                    this.searchInfo = data;
                    this.$message({
                        showClose: true,
                        message: '查找成功！',
                        type: 'success'
                    });
                } else {
                    this.searchInfo = [];
                    this.$message({
                        showClose: true,
                        message: '信息输入有误！',
                        type: 'error'
                    });
                }
            },
            toRight(key,item) {
                this.listId = this.menuList[key].id
                this.imageUrl = item.imageUrl;
            },
            search() {
                this._getPartsMenu(this.searchTxt);
            },
            toMaintain(part) {

                this.$router.push({
                    name: 'maintain', query: {
                        partsNumber: part.partsNumber,
                        imageUrl: encodeURIComponent(this.imageUrl)
                    }
                });
            },
        },
        created() {
            this.hostId = this.$route.query.hostId || 1;
            this.listId = this.$route.query.id || 1;
            this._getPartMenu(this.hostId);
            this._getPartMenuListMenu(this.listId);
            this.imageUrl = this.$route.query.imageUrl;
        },
        watch: {
            listId(id) {
                this._getPartMenuListMenu(id)
            }
        }
    }

</script>

<style scoped lang="scss">
    .top {
        margin: 30px 0 30px 20%;
        width: 500px;
        input {
            margin-right: 10px;
            width: 150px;
            padding: 1px 7px;
            height: 24px;
            border-radius: 4px;
            outline: none;
            border: 1px solid #d9d9d9;
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
        }
        button {
            padding: 0 7px;
            font-size: 14px;
            border-radius: 4px;
            height: 24px;
            color: #fff;
            background-color: #1890ff;
            border-color: #1890ff;
            outline: none;
        }
    }

    .left {
        width: 15%;
        height: 942px;
        overflow: auto;
        float: left;
        box-shadow: 0px -2px 0px #ddd;
        ul {
            margin-top: 2px;
            li {
                list-style: none;
                margin-bottom: 2px;
                box-shadow: 2px 2px 2px #ddd;
                cursor: pointer;
                span {
                    display: block;
                }
                a {
                    display: block;
                    text-decoration: none;
                    padding: 10px;
                    .liId {
                        font-size: 16px;
                        display: inline-block;

                        margin: 5px 10px 0 10px;
                        color: rgba(0, 0, 0, 0.7);
                        width: 20%;
                        text-align: left;
                    }
                    .liright {
                        display: inline-block;
                        vertical-align: top;
                        text-align: left;
                        line-height: 21px;
                        color: rgba(0, 0, 0, 0.9);
                        font-size: 14px;
                        width: 80%;
                        span {
                            text-align: left;
                            overflow: hidden;
                        }
                    }
                }
                a:hover {
                    transition: all .4s linear;
                    background: #2c3e50;
                    span {
                        color: #fffdef;
                    }
                }
            }
        }
    }

    .center {
        position: relative;
        z-index: 1;
        float: left;
        padding: 20px;
        box-shadow: 2px -2px 2px #ddd;
        width: 38%;
        height: 847px;
    }

    .right {
        float: left;
        width: 38%;
        text-align: left;
        margin-left: 2%;
        padding: 20px;
        box-shadow: -2px -2px 2px #ddd;
        height: 942px;
        overflow: auto;
        ul {
            li {
                list-style: none;
                cursor: pointer;
                height: 150px;
                padding: 10px 0;
                position: relative;
                font-size: 16px;
                border-bottom: 1px solid #ddd;
                .name, .where {
                    display: block
                }
                .name {
                    font-size: 20px;
                    color: #2c3e50;
                    font-weight: 500;
                }
                .where {
                    font-size: 20px;
                    letter-spacing: 2px;
                    margin-bottom: 5px;
                    span {
                        color: #bd2c00;
                    }
                }
                .last {
                    color: #666;
                    font-size: 14px;
                    span {
                        display: inline-block;
                        vertical-align: top;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
</style>